import React, {Component} from 'react';
import {Input, Row, Col, Icon, Spin} from 'antd';
import {
  exchangeCode
} from '../../fetch/fetchApi';
import '../../assets/stylus/com/display/exchangeTextarea.styl';

const TextArea = Input.TextArea;

class CodeExchange extends Component {
  constructor () {
    super();
    this.init();
    this.state = {
      result: '暂无转换内容',
      params: {
        text: '',
        description: '',
        spinLoading: !1
      }
    };
  }

  init () {
  }

  componentWillMount () {
    this.params = {};
    this.subFlag = !0;
  }

  async translate () {
    if (!this.subFlag) {
      return;
    }
    this.subFlag = !1;
    try {
      this.setState({
        spinLoading: !0
      });
      const text = this.state.params.text.replace(/\n/g, '');
      this.state.params.text = text;
      const resData = await exchangeCode(this.state.params);
      resData.data.code === '200' && this.setState({
        result: resData.data.data.replace(/,/g, '\n')

    });
      this.subFlag = !0;
      this.setState({
        spinLoading: !1
      });
    } catch (e) {
      this.subFlag = !0;
      this.setState({
        spinLoading: !1
      });
      console.log(e);
    }
  }

  setExchangePlain (v) {
    this.state.params.description = v.target.value;
    this.setState({
      params: this.state.params
    });
  }

  setExchangeContent (v) {
    this.state.params.text = v.target.value;
    this.setState({
      params: this.state.params
    });
  }

  render () {
    const Content =
      <div className="sc-page-content sc-exchange-text">
        <Row>
          <Col xl={11}>
            <TextArea value={this.state.params.description} className="ex-reason" placeholder="请输入转换说明，不可为空" onChange={this.setExchangePlain.bind(this)}/>
            <TextArea className="ex-import" placeholder="输入需要转换的信息" onChange = {this.setExchangeContent.bind(this)}/>
          </Col>
          <Col className="ex-btn-wrap" xl={2}>
            <Icon className="ex-btn" type="right-circle" onClick={this.translate.bind(this)}/>
          </Col>
          <Col xl={11}>
            <div className="ex-export">
              <pre>{this.state.result}</pre>
              {this.state.spinLoading && <Spin className={'loadingMiddle'}/>}
            </div>
          </Col>
        </Row>
      </div>;
    return Content;
  }
}

export default CodeExchange;